<template>
	<view class="editLayout">
		<view class="row">
			<view class="head">
				<view class="title">鸡汤类型</view>				
			</view>
			<view class="body">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="0" color="#4F9153" :checked="formData.soup_type==0"></radio>毒鸡汤
					</label>
					<label class="radio">
						<radio value="1" color="#f83162" :checked="formData.soup_type==1"></radio>心灵鸡汤
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="row">
			<view class="head">
				<view class="title">鸡汤内容</view>
				<text class="subTitle">
					1.一行不超过12个字，最多5行\n
					2.毒鸡汤、心灵鸡汤、有感而发均可\n
					3.提交后管理员审核，有可能会微调
				</text>
			</view>
			<view class="body">
				<textarea v-model="formData.content" class="soupConent" placeholder="编写你的鸡汤吧~~"></textarea>
			</view>
		</view>
		
		
		<view class="row">
			<view class="head">
				<view class="title">添加出处</view>
				<text class="subTitle">
					如果是摘抄的，建议添加出处
				</text>
			</view>
			<view class="body">
				<input v-model="formData.from" class="fromIpt" type="text" placeholder="如:《红楼梦》">
			</view>
		</view>
		
		
		<view class="row btnGroup">			
			<view class="body">
				<button type="primary">提交审核</button>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
const formData = ref({
	soup_type:0,
	content:"",
	from:""
})

const radioChange = ()=>{
	
}
</script>

<style lang="scss" scoped>
.editLayout{
	padding:30rpx;
	.row{
		padding-bottom:30rpx;
		.head{
			padding:20rpx 0;
			.title{
				font-size: 34rpx;
				padding-left:20rpx;
				position: relative;
				padding-bottom:6rpx;
				&::before{
					content: "";
					display: block;
					width: 8rpx;
					height: 30rpx;
					background: $brand-theme-color;
					position: absolute;
					left:0;
					top:calc(50% - 15rpx);
					border-radius: 10rpx;
				}
			}
			.subTitle{
				font-size: 26rpx;
				color:$text-font-color-3;
			}
		}
		.body{
			.radio{
				margin-right:30rpx;
				radio{
					transform: scale(0.9);
				}
			}
			.soupConent{
				border:1px solid $border-color;
				width: 100%;
				height: 400rpx;
				background: #FCFCFC;
				padding:20rpx;
				border-radius: 10rpx;
				font-size: 50rpx;
			}
			.fromIpt{
				border:1px solid $border-color;
				height: 80rpx;
				padding:0 20rpx;
				border-radius: 10rpx;
				background: #FCFCFC;
			}
		}
	}
	
	.btnGroup{
		padding-top:60rpx;
	}
}
</style>
